<template>
	<view class="root safe-area-inset-bottom" :style="{ marginBottom: `126rpx` }">
		<view v-for="(section, sectionKey) in options" :key="sectionKey" class="mb-14">
			<view
				v-for="(option, optionKey) in section"
				:key="optionKey"
				:style="{ padding: `24rpx` }"
				class="bgc-fff mt-2"
			>
				<text class="color-333 fs-30">{{ option.title }}</text>

				<input
					v-if="sectionKey === 'input'"
					:type="option.type"
					:placeholder="option.placeholder"
					placeholder-class="fs-26 color-888"
					:maxlength="option.maxlength"
					:value="option.value"
					@input="changeValue($event, sectionKey, optionKey)"
					class="height-88"
				/>

				<block v-if="sectionKey === 'slider'">
					<slider
						show-value
						block-size="15"
						block-color="#fd4b3d"
						backgroundColor="#ffe0db"
						activeColor="#f94435"
						:value="option.value || option.min"
						:min="option.min"
						:max="option.max"
						@change="changeValue($event, sectionKey, optionKey)"
					/>
					<label class="fs-26 color-888 jc-sb">
						<text>{{ option.min }}{{ option.unit }}</text>
						<text>{{ option.max }}{{ option.unit }}</text>
					</label>
				</block>

				<swiper
					v-if="sectionKey === 'swiper'"
					:indicator-dots="true"
					indicator-color="#c6c6c6"
					indicator-active-color="#fb533c"
					class="mt-30 br-12 oh"
					:style="{ height: `205rpx` }"
					:current-item-id="`item-${option.value}`"
					@change="changeStyleSwiper($event, sectionKey, optionKey)"
				>
					<swiper-item
						v-for="(img, index) in option.styleImages"
						:key="index"
						:item-id="`item-${img.id}`"
					>
						<image
							class="width-100percent height-100percent"
							:src="img.cover_image"
							mode="aspectFill"
						/>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<view
			class="bgc-fff safe-area-inset-bottom content-box jc-center fixed bottom-0 width-100percent"
			:style="{ height: `120rpx` }"
		>
			<button
				hover-class="tap-hover"
				@click="submitData"
				:style="{
					margin: `0 24rpx`,
					backgroundImage: `linear-gradient(to right, #f45455, #ff7b6f)`,
				}"
				class="fs-34 color-fff fw-500 lh-90"
			>
				提交
			</button>
		</view>
	</view>
</template>

<script lang="ts">
	import { sleep } from "@/static/libs/utils";
	import { Vue, Component } from "vue-property-decorator";

	@Component
	export default class SetStoreCard extends Vue {
		// component property
		cardStyles: AnyObject[] = [];
		id: number = 0;
		optionData: AnyObject = {};
		public get options(): AnyObject {
			const { optionData, cardStyles: styleImages } = this;

			return {
				input: {
					name: {
						title: "储值卡名称",
						value: optionData.name,
						name: "name",
						placeholder: "请输入名称",
						type: "text",
						maxlength: 16,
					},
					desc: {
						title: "储值卡描述",
						value: optionData.des,
						name: "des",
						placeholder: "请输入储值卡描述",
						type: "text",
						maxlength: 36,
					},
					faceValue: {
						title: "储值卡面额",
						value: optionData.face,
						name: "face",
						placeholder: "请输入储值卡面额",
						type: "digit",
						maxlength: 16,
					},
					factAmount: {
						title: "实付金额",
						value: optionData.money,
						name: "money",
						placeholder: "请输入实付金额",
						type: "digit",
						maxlength: 16,
					},
					amount: {
						title: "储值卡积分",
						value: optionData.score,
						name: "score",
						placeholder: "请输入储值卡积分",
						type: "number",
						maxlength: 16,
					},
				},
				slider: {
					term: {
						title: "分红期限",
						unit: "天",
						name: "term",
						value: optionData.term,
						min: 1,
						max: 90,
					},
					proportion: {
						title: "分红比例",
						unit: "%",
						name: "proportion",
						value: optionData.proportion,
						min: 0,
						max: 100,
					},
					netReceipts: {
						title: "商家实收",
						unit: "%",
						name: "income",
						value: optionData.income,
						min: 0,
						max: 90,
					},
					goldenRatio: {
						title: "赏金比例",
						unit: "%",
						name: "reward",
						value: optionData.reward,
						min: 0,
						max: 100,
					},
				},
				swiper: {
					style: {
						title: "选择储值卡样式",
						name: "card_style_id",
						value: optionData.card_style_id || styleImages[0]?.id,
						styleImages,
					},
				},
			};
		}

		onLoad({ mode = "add", id = "0" }: { mode: "add" | "edit"; id: string }) {
			this.id = +id;
			uni.setNavigationBarTitle({
				title: { add: "添加", edit: "编辑" }[mode] + "储值卡",
			});
			this.$request.get("/index/cardStyle").then(({ data }) => {
				this.cardStyles = data;
			});
			if (mode === "add") return;

			this.$request.post("/index/cardDetail", { id }).then(({ data }) => {
				this.optionData = data;
			});
		}
		changeValue({ detail }: AnyObject, sectionKey: string, optionKey: string) {
			this.options[sectionKey][optionKey].value = detail.value;
		}

		changeStyleSwiper({ detail }: AnyObject, sectionKey: string, optionKey: string) {
			const cardStyle = this.options[sectionKey][optionKey];

			cardStyle.value = cardStyle.styleImages[detail.current].id;
		}

		submitData() {
			uni.showLoading({ title: "Loading..." });

			const params: [string, string][] = [];
			const verifyData: boolean = Object.values(this.options)
				.map((item) => Object.values(item))
				.flat()
				.every((item: any) => {
					const returnValue = ![undefined, null, "", NaN].includes(item.value);
					returnValue
						? params.push([item.name, item.value])
						: uni.showToast({
								title: item.placeholder,
								icon: "none",
						  });
					return returnValue;
				});

			if (!verifyData) return;

			this.$request
				.get("/index/setShopCard", {
					id: this.id,
					...Object.fromEntries(params),
				})
				.then(async ({ msg: title }) => {
					await uni.showToast({ title, mask: true });
					await sleep(1.5);
					uni.navigateBack({});
				});
		}
	}
</script>

<style lang="scss" scoped>
	// scss

	::v-deep {
		slider {
			margin: 12rpx 0 12rpx 24rpx;
			.uni-slider-handle-wrapper,
			.wx-slider-handle-wrapper {
				height: 20rpx;
			}
		}
	}
</style>